<template>
    <div class="capex-upload-wrap">
        <Upload
            :class="{buttonStyle: type==='button'}"
            v-if="!disabled"
            ref="upload"
            :accept="accept"
            :show-upload-list="false"
            :default-file-list="file"
            :on-success="handleSuccess"
            type="drag"
            :action="fileUploadUrl"
            :data="{dir:'capex'}"
            :disabled="limit <= files.length"
            :on-progress="onProgress"
        >
            <div style="padding: 20px 0" v-if="!type">
                <i class="iconfont zy-common-shangchuan"></i>
                <p>{{ $t('单击或拖动此处的文件上传') }}</p>
                <p>{{ $t('支持扩展名：') }} {{ accept }}</p>
            </div>
            <div v-if="type==='button'">
                Upload
            </div>
        </Upload>
        <div v-if="Array.isArray(files)">
            <div style="display: block" v-for="(item,index) in files"  :key="index">
                <Tag
                     class="tag"
                     color="blue"
                     type="border"
                     :closable="!disabled"
                     @on-close="removeFile(item)"
                     :title="item.fileName"
                     @click.native="handlePreView(item)">
                    {{ item.fileName }}
                </Tag>
            </div>
        </div>
        <div>
            <div class="progress-item" v-for="(item,index) in peddingFiles" :key="index"
                 v-show="item.status !=='finished' && !item.remove">
                <p class="text">{{ item.name }}</p>
                <Progress style="width:calc(100% - 50px)" :percent="item.percentage.toFixed(2)==100 ?99:item.percentage.toFixed(2)" status="active"
                          :stroke-width="12" text-inside>
                </Progress>
                <div class="cancel" @click="removePeddingFile(item,index)">{{ $t('取消') }}{{item.finished}}
                </div>
            </div>
        </div>

        <iframeModalCompent v-if="iframeShow" :isStudy="false" :fileName="fileName" :iframeShow="iframeShow"
                            :iframeModalSrc="iframeModalSrc"
                            @closeIframe="iframeShow = false"></iframeModalCompent>
    </div>
</template>

<script>
import util from "@/util/util";
import iframeModalCompent from './iframe'

export default {
    name: "uploadFile",
    components: {iframeModalCompent},
    props: {
        limit: {
            default: 100,
            type: Number
        },
        disabled: {
            default: false,
            type: Boolean
        },
        fileList: {
            default: () => [],
            type: Array
        },
        accept: {
            default: '.*',
            type: String
        },
        type: {
            default: '',
            type: String
        }
    },
    data() {
        return {
            file: [],
            files: [],
            userId: "",
            fileUploadUrl: "",
            iframeShow: false,
            iframeModalSrc: "",
            fileName: "",
            peddingFiles: [],
            cancelList: [],
            removePeddingFiles:[]
        }
    },
    mounted() {
        this.fileUploadUrl = `${util.getEnv()}/fileServer/upload`
        this.userId = localStorage.getItem('ziyunFactoryUserId')
        this.files = (Array.isArray(this.fileList) && this.fileList.length > 0) ? this.fileList : [];
        if (this.files) {
            this.onChange()
        }
    },
    methods: {
        removePeddingFile(item, index) {
            this.cancelList.push(item)
            this.peddingFiles[index].remove = true
        },
        clearFiles() {
            this.files = []
            this.onChange()
        },
        handlePreView(item) {
            // if (item) {
            //   window.open(this.util.filePathToUrl(item.filePath));
            // }
            this.iframeShow = true
            // console.log(item.filePath,'item.filePathitem.filePath')

            if (item.createBy == localStorage.getItem('ziyunFactoryUserId')) {
                this.fileName = item.fileName
            } else {
                this.fileName = ""
            }
            this.iframeModalSrc = item.filePath
        },
        removeFile(file) {
            for (let i = 0; i < this.file.length; i++) {
                if (this.file[i].url === file.fileUrl) {
                    this.file.splice(i, 1)
                    break;
                }
            }
            for (let i = 0; i < this.files.length; i++) {
                if (this.files[i].fileUrl === file.fileUrl) {
                    this.files.splice(i, 1)
                    break;
                }
            }



            const obj = this.peddingFiles.find(item => item.uid === file.uid)
            if (obj) {
                this.peddingFiles.splice(this.peddingFiles.indexOf(obj), 1)

            }

            this.$forceUpdate()
            this.onChange()
        },
        onProgress(event, file, fileList) {
            this.peddingFiles = []
            fileList.forEach(item => {
                if (!item.remove) {
                    item.percentage = Math.round(item.percentage)
                    this.peddingFiles.push(item)
                }
            })
            this.$forceUpdate()
        },
        handleSuccess(res, file) {

            if (this.cancelList.find(item => item.uid === file.uid)) return false;
            // const obj = this.peddingFiles.find(item => item.uid === file.uid)

            // if (obj) {
            //     this.peddingFiles[this.peddingFiles.indexOf(obj)].remove = true
            //     this.removePeddingFiles.push(obj)
            //     this.$forceUpdate()
            // }
            if (res.code === 200) {
                const {fileName, fileUrl, filepath, suffix, fileLength} = res.data;
                this.file.push({name: fileName, url: fileUrl})
                if (!Array.isArray(this.files))
                    this.files = []
                this.files = [...this.files, {
                    fileName,
                    fileUrl,
                    filePath: filepath,
                    suffix,
                    fileSize: fileLength,
                    createBy: localStorage.getItem('ziyunFactoryUserId'),
                    // uid:file.uid
                }]
                this.onChange()
            }
        },
        onChange() {
            this.$emit('change', this.files)
        }
    }
}
</script>

<style scoped lang="scss">
.progress-item {
    padding-top: 5px;
    position: relative;
    overflow: hidden;

    .cancel {
        position: absolute;
        right: 0;
        top: 18px;
        font-size: 13px;
        color: #0d69f8;
        cursor: pointer;
    }

    .text {
        font-size: 13px;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        line-height: 1;
    }
}

ul {
    margin: 20px 0;
}

li {
    position: relative;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 10px;

    &:hover {
        background: #f5f7f9;
    }

    a {
        display: inline-block;
        max-width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 30px;
    }
}

.delete {
    position: absolute;
    color: red;
    right: 10px;
    top: 5px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    //background: rgba(0,0,0,.5);
    line-height: 20px;
    text-align: center;
    font-size: 15px;
}

.iconfont {
    font-size: 52px;
    color: #035beb;
}

.tag {
    max-width: 100%;
    border-color: #035beb;
    position: relative;
    padding-right: 33px;
    box-sizing: border-box;

    &:after {
        background: #035beb;
    }

    ::v-deep .ivu-tag-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        display: inline-block;
        line-height: 22px;
        color: #035beb !important;
        opacity: 1 !important;

    }

    ::v-deep .ivu-icon-ios-close {
        margin-left: 0px !important;
        /* left: 7px; */
        /* top: -7px; */
        color: #035beb !important;
        font-weight: bold;
        opacity: 1 !important;
        position: absolute;
        right: 8px;
        width: 10px;
        left: auto;
        top: 4px;
    }
}
.buttonStyle{
    margin: 10px 0;
}
</style>
<style lang="scss">
.capex-upload-wrap {
    .ivu-progress-inner-text {
        position: absolute;
        top: -10px;
        right: 0;
        color: #ffffff;
    }
}

</style>
